<template>
  <div>
    <el-card>
      <!-- 发起原因输入框 -->
      <LaunchReasonInput
        :reason.sync="launchReason"
        :isDisabled="true"
      />
    </el-card>
    <Table :columns="columns" :data="tableDataList" :loading="tableLoading">
      <template slot-scope="{ row }" slot="presentSaleAreaShortNames">
        {{ row.presentSaleAreaShortNames || row.originalSaleAreaShortNames }}
      </template>
    </Table>
    <FooterFields :footerFields="footerFields" />
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import FooterFields from '@/pages/commodity/components/FooterFields';
import LaunchReasonInput from '@/components/LaunchReasonInput';

export default {
  name: 'modifySalesAreaDetail',
  components: {
    FooterFields,
    LaunchReasonInput
  },
  data () {
    return {
      launchReason: '', // 发起原因
      tableLoading: false,
      columns: [
        {
          title: 'spu编码',
          minWidth: 120,
          key: 'spuNo',
          align: 'center'
        },
        {
          title: '商品名称',
          minWidth: 120,
          key: 'productName',
          align: 'center'
        },
        {
          title: '品牌',
          minWidth: 120,
          key: 'brandName',
          align: 'center'
        },
        {
          title: '商品管理区域',
          minWidth: 120,
          key: 'manageAreaName',
          align: 'center'
        },
        {
          title: '销售区域-原值',
          minWidth: 120,
          key: 'originalSaleAreaShortNames',
          align: 'center'
        },
        {
          title: '销售区域-现值',
          minWidth: 120,
          slot: 'presentSaleAreaShortNames',
          // key: 'presentSaleAreaShortNames',
          align: 'center'
        }
      ],
      tableDataList: [],
      footerFields: [],
      apiUrl: {
        getRecord: {
          url: '/sysback/modifySaleArea/getRecord',
          type: 'post'
        }
      }
    };
  },
  created () {
    let uuid = this.$route.query.uuid;
    this.getRecordInfo({ recordUuid: uuid });
  },
  methods: {
    getRecordInfo (params) {
      this.tableLoading = true;
      ApiRequest(
        this.apiUrl.getRecord.url,
        this.apiUrl.getRecord.type,
        params
      ).then((data) => {
        this.tableLoading = false;
        if (data.retStatus == 1) {
          if (data.retData) {
            this.footerFields = data.retData;
            this.launchReason = data.retData.launchReason;
            if (data.retData.detailVoList.length > 0) {
              this.tableDataList = data.retData.detailVoList;
            }
          }
        }
      }).catch(() => {
        this.tableLoading = false;
      })
    },
  }
};
</script>

<style scoped>
</style>
